<template>
	<view class="container">
		<view class="class padding">
			<view class="class-item bg-white padding margin-top flex align-center" v-for="(item,index) in arr"
				:key="index" @tap="classDetail(item)">
				<view class="class-mes flex flex-direction align-center text-white text-bold justify-center" :class="'class-'+(index%4+1)">
					<!-- <text>{{item.add_time}}</text> -->
					<text class="margin-top-xss text-center">{{item.class_name?item.class_name:item.class.class_name}}</text>
				</view>
				<view class="class-mes2 flex flex-direction align-left margin-left">
					<text class="text-black text-bold">{{item.class_name?item.class_name:item.course_name}}</text>
					<text class="text-grey text-sm margin-top-xs">{{item.course_teacher_name||teacher_name}}</text>
				</view>
				<view class="cuIcon-right text-grey text-lg"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import u from '@/utils/common.js'
	let app = getApp();
	export default {
		data() {
			return {
				class_name: '',
				arr: [],
				image: "../../static/class_img_4.jpg",
				teacher_name: '',
				modalName: null,
				is_teacher: false
			}
		},
		onLoad() {
			u.appLogin(()=>{
				this.getMyClass()
				console.log(app.globalData)
				if(app.globalData.teacher_info){
					this.is_teacher = true
					this.teacher_name = app.globalData.teacher_info.teacher_name
					// this.getMyClass()
				}else if(app.globalData.course_teacher_info){
					this.is_teacher = false
					// this.getCourseTeacherClass()
				}
			})
		},
		methods: {
			getMyClass(){
				u.request({
					url: 'users/teacher/class_list',
					method: 'GET',
					success: res =>{
						console.log(res);
						this.arr = res.result.list
					},
					fail: err=>{
						console.log(err);
					}
				})
			},
			// getCourseTeacherClass(){
			// 	u.request({
			// 		url: 'users/course_teacher/class_list',
			// 		method: 'GET',
			// 		success: res =>{
			// 			console.log(res);
			// 			this.arr = res.result.list
			// 		},
			// 		fail: err=>{
			// 			console.log(err);
			// 		}
			// 	})
			// },
			classDetail(item){
				app.globalData.class_info = item
				app.globalData.class_id = item.class_id
				app.globalData.target_info = item
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.class-1{
		background: url(../../static/class_img_1.jpg);
	}
	.class-2{
		background: url(../../static/class_img_2.jpg);
	}
	.class-3{
		background: url(../../static/class_img_3.jpg);
	}
	.class-4{
		background: url(../../static/class_img_4.jpg);
	}
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		margin-top: -30rpx;
	}

	.class-item {
		height: 200rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 3rpx #f5f5f5;

		.class-mes {
			height: 140rpx;
			width: 210rpx;
			background-size: cover;
			border-radius: 12rpx;
		}

		.class-mes2 {
			flex: 1 1 0;
		}
	}

	.btn {
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #2982ff;
		margin: 50rpx 75rpx;
		// position: absolute;
		// bottom: 95rpx;
		// left: 75rpx;
	}

	.con {
		height: 500rpx;

		.title {
			width: 200rpx;
			margin-top: 38rpx;
			justify-content: space-around;
		}

		.input {
			margin-top: 128rpx;

			input {
				width: 500rpx;
				height: 75rpx;
				border-radius: 10rpx;
				border: 1rpx solid #f1e1e1;
			}
		}

		.commite {
			width: 204rpx;
			height: 70rpx;
			line-height: 70rpx;
			margin-top: 42rpx;
			border-radius: 40rpx;
		}
	}

	.base-color {
		background-color: #418fff;
	}
</style>
